<template>
  <view class="tab-bar">
    <van-tabbar
      :model-value="currentTab"
      @change="handleTabs"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
    >
      <van-tabbar-item
        v-for="item in tabs"
        :key="item.id"
        :icon="item.active"
        :to="item.path"
      >
        <span>{{ item.name }}</span>
        <template #icon="props" v-if="item.icon">
          <img :src="props.active ? item.icon.active : item.icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps({
  tabs: {
    type: Array,
    default: [],
  },
  currentTab: {
    type: Number,
    default: 0,
  },
  activeColor: {
    type: String,
    default: "#1989fa",
  },
  inactiveColor: {
    type: String,
    default: "#000",
  },
});
const { tabs, currentTab, activeColor, inactiveColor } = toRefs(props);
const emit = defineEmits();
function handleTabs(active) {
  emit("handleTabs", active);
}

defineExpose({
  handleTabs,
});
</script>

<style></style>
